<template>
    <div :class="['containers',{'isNotScroll':showmodal}]" slot="container">
        <div class="intro">
            <img @click="descrClick" src="@/assets/images/card/upgrade.png" />
        </div>
        <div class="log">
            <div class="box">
                <div class="imgbox"><img :class="[{'active':active1 == 0}]" src="@/assets/images/card/yin.png" /></div>
                
                <!-- <img class="cur" v-if="active1 ==0" src="@/assets/images/card/yincur.png" /> -->
                <span :class="[{'active':active1 == 0}]">银卡会员</span>
                <div class="triangle" v-if="active1 ==0"></div>
            </div>
            <div class="box">
                <div class="imgbox"><img :class="[{'active':active1 == 1}]" src="@/assets/images/card/jin.png" /></div>
                
                <!-- <img class="cur" v-if="active1 ==1" src="@/assets/images/card/jincur.png" /> -->
                <span :class="[{'active':active1 == 1}]">金卡会员</span>
                <div class="triangle" v-if="active1 ==1"></div>
            </div>
            <div class="box">
                <div class="imgbox"><img :class="[{'active':active1 == 2}]"  src="@/assets/images/card/bo.png" /></div>
                
                <!-- <img class="cur" v-if="active1 ==2" src="@/assets/images/card/bocur.png" /> -->
                <span :class="[{'active':active1 == 2}]">铂金会员</span>
                <div class="triangle" v-if="active1 ==2"></div>
            </div>
            <div class="box">
                <div class="imgbox">
                    <img :class="[{'active':active1 == 3}]" src="@/assets/images/card/zuan.png" />
                </div>
                <!-- <img class="cur" v-if="active1 ==3" src="@/assets/images/card/zuancur.png" /> -->
                <span :class="[{'active':active1 == 3}]">钻石会员</span>
                <div class="triangle" v-if="active1 ==3"></div>
            </div>
        </div>
        <div class="swiper-container" id="swiper_tab" ref="mySwiper" >
            <div class="swiper-wrapper">
                <div class="swiper-slide slidepage">
                    <div class="swiper-containerbox scroll">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slidescroll">                                
                                <img class="cir_img" src="@/assets/images/card/yin_01.jpg" alt="商品图" />                                
                                <div class="cir_imgbox">
                                    <img class="cir_img" src="@/assets/images/card/yin_02.jpg" alt="商品图" />
                                    <div class="cir_bottom">
                                        <div class="list">
                                            <div class="item active" @click="showModal(0)"></div>
                                            <div :class="['item',{'active':active1 >= 1}]" @click="showModal(1)"> </div>
                                            <div :class="['item',{'active':active1 >= 2}]" @click="showModal(2)"></div>
                                            <div :class="['item',{'active':active1 >= 3}]" @click="showModal(3)"> </div>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide slidepage">
                    <div class="swiper-containerbox scroll">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slidescroll">
                                <img class="cir_img" src="@/assets/images/card/jin_01.jpg" alt="商品图" />                                
                                <div class="cir_imgbox">
                                    <img class="cir_img" src="@/assets/images/card/jin_02.jpg" alt="商品图" />
                                    <div class="cir_bottom">
                                        <div class="list">
                                            <div class="item active" @click="showModal(0)"></div>
                                            <div :class="['item',{'active':active1 >= 1}]" @click="showModal(1)"> </div>
                                            <div :class="['item',{'active':active1 >= 2}]" @click="showModal(2)"></div>
                                            <div :class="['item',{'active':active1 >= 3}]" @click="showModal(3)"> </div>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide slidepage"  >
                    <div class="swiper-containerbox scroll">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slidescroll">
                                <img class="cir_img" src="@/assets/images/card/bo_01.jpg" alt="商品图" />                                
                                <div class="cir_imgbox">
                                    <img class="cir_img" src="@/assets/images/card/bo_02.jpg" alt="商品图" />
                                    <div class="cir_bottom">
                                        <div class="list">
                                            <div class="item active" @click="showModal(0)"></div>
                                            <div :class="['item',{'active':active1 >= 1}]" @click="showModal(1)"> </div>
                                            <div :class="['item',{'active':active1 >= 2}]" @click="showModal(2)"></div>
                                            <div :class="['item',{'active':active1 >= 3}]" @click="showModal(3)"> </div>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide slidepage">
                    <div class="swiper-containerbox scroll">
                        <div class="swiper-wrapper">
                        <div class="swiper-slide slidescroll">
                            <img class="cir_img" src="@/assets/images/card/zuan_01.jpg" alt="商品图" />
                            <div class="cir_imgbox">
                                <img class="cir_img" src="@/assets/images/card/zuan_02.jpg" alt="商品图" />
                                <div class="cir_bottom">
                                    <div class="list">
                                        <div class="item active" @click="showModal(0)"></div>
                                        <div :class="['item',{'active':active1 >= 1}]" @click="showModal(1)"> </div>
                                        <div :class="['item',{'active':active1 >= 2}]" @click="showModal(2)"></div>
                                        <div :class="['item',{'active':active1 >= 3}]" @click="showModal(3)"> </div>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="r_modal" v-show="showmodal" @click="hideModal">
            <div class="modal_box">
                <div class="iconfont iconhuabian-15"></div>
                <div class="r_content">
                    <!-- 1 -->
                    <div class="item active">
                        <div class="icon_box">
                            <div :class="['iconfont','icon',{'iconhaoli':cli == 0,'iconfuli':cli == 1,'iconpinjianhui':cli == 2,'iconshengri':cli == 3}]"></div>
                        </div>
                        <div class="text">{{cli == 0 ? '升级好礼':(cli == 1 ? '兑换福利' : cli == 2 ? '品鉴活动' :'生日惊喜' )}}</div>
                    </div>
                    <div class="r_cont">
                        {{
                            cli == 0 ? '秉承杜康品牌精神,为您呈上对应等级的独家升级好礼,会员等级越高,升级礼越丰厚。':(
                                cli == 1 ? '累计消费记录,获享优选专属兑换礼':cli == 2 ? '感谢你对杜康一如既往的挚爱与支持,你将有机会受邀参加杜康官方组织的高端沙龙,顶级白酒鉴品会等。':
                                '在生辰之月,您将收到杜康官方送出的生日礼物,敬贺尊贵的您生日快乐。'
                            )
                        }}
                    </div>
                    <div class="iconfont iconhuabian-15"></div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import { Api, Global, Util } from "@utils/global";
export default {
    props: {
        
    },
    name: 'carrousel',
    data() {
        return {
            active1:0,
            showmodal:false,
            cli:0
        }
    },
    computed: {
        swiper(){
            return this.$refs.mySwiper.swiper;//全局使用swiper对象，使用时直接this.swiper.方法
        }
    },
    mounted() {
        this.$nextTick(() =>{
            this.establish_swiper();
            this.establish_swiper_scroll();
        });
    },

    components: {
        
    },
    methods: {
        redirect: Util.redirect,
        descrClick(){
            this.redirect('introduction')
        },
        establish_swiper_scroll(){//创建swioper滚动的区域对象
            var scrollSwiper = new Swiper('.scroll', {
            direction: 'vertical',//方向竖直
            freeMode: true,//开启自由模式
            slidesPerView: 'auto',
            mousewheel: {
                releaseOnEdges: true
            }
            })
        },
        establish_swiper(){
            var _this=this;//区别开data中的this和swiper中的this
            var swiper= new Swiper("#swiper_tab", {//通过id来区分swiper对象
                initialSlide: 0,//初始化显示第几个，从o开始
                resistanceRatio: 0,//取消边缘的反弹效果
                watchSlidesProgress: true,
                on: {
                    transitionStart: function() {//滑动动画开始时，
                        _this.active1 = this.realIndex;
                    }
                }
            });

        },
        showModal(ev){
            console.log(ev)
            // this.active1 = ev;
            this.cli = ev;
            this.showmodal = true;
        },
        hideModal(){
            this.showmodal = false;
        }
    }
    
};
</script>

<style lang="scss">
.isNotScroll{
    height: 100vh; overflow: hidden;
}
.rank{position: relative;}
.swiper-container{
    height: auto;width: 100vw;
}
.swiper-containerbox{height:100%}
.intro{
    width: 100%;height: 134px;display: flex;justify-content: flex-start;
    align-items: center;position: absolute;top: 0;left:0;z-index: 100;padding-left: 40px;
}
.intro img{
    height: 50px;width: 180px;
}
.log{
    display: flex;align-items:flex-end;justify-content: center;padding: 0 40px 30px 40px;
    position: absolute;top: 134px;width: 100%;z-index: 100;height: 210px;}
.log .box{
    width: 175px;height: 163px;
    display: flex;flex-direction: column;
    justify-content:flex-end;align-items: center;padding-bottom: 15px;
    position: relative;
}
.log .box .imgbox{width: 90px;height: 90px;display: flex;align-items: center;justify-content: center;}
.log .box img{
    width: 70px;height: 66px;
    position: relative;opacity: 0.5;
}
.log .box img.active{
    width: 90px;height: 84px;opacity: 1;
}
.log .box span{
    font-size: 20px;color: #fff;
}
.log .box.active span{
    color: #e6cfa6;
}
.log .box .triangle{
    width: 0px;
    height: 0px;
    position:absolute;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #dfc696 transparent;
    bottom: 5px;left: 70px;
}
.cir_img{
    width: 100%;height: auto;display: block;
}
.cir_imgbox{
    width: 100%;position: relative;
    .cir_bottom{
    position: absolute;
    top: 0;
    left: 0;
    width: 750px;
    background-color: #000;
    height: 120px;
    z-index:100;
    opacity: 0;
    .list{
        display: flex;
        width:660px;
        margin: 0px 40px;
        height: 100%;
        justify-content: flex-start;
        .item{
            width: 165px;
            height: 100%;            
        }
    }
}
}

.r_modal{
    position: fixed;
    background-color: (0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: 9;
    .modal_box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 450px;
        height: 350px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 24px;
        .iconhuabian-14{
            color: #d7bf87;
            font-size: 41px;
        }
        .iconhuabian-15{
            color: #d7bf87;
            font-size: 18px;
        }
        .r_content{
            color: #fff;
            padding: 20px 20px;
            border:1px solid #d7bf87;
            border-radius: 5px;
            .item{
                // width: 220px;
                text-align: center;
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;
                .icon_box{
                    width: 100px;
                    padding: 0px 20px;
                    height: 80px;
                    line-height: 80px;
                    text-align: center;
                    .icon{
                        color:#ececec;
                    }
                }
                .text{
                    font-size: 26px;
                    line-height: 44px;
                    color: #ececec;
                }
            }
            .active{
                .icon_box{
                    .icon{
                        color:#d7bf87;
                    }
                }
                .text{
                    color: #d7bf87;
                }
            }
            .r_cont{
                padding: 20px 20px;
                color: #fff;
            }
            .iconhuabian-15{
                color: #d7bf87;
                font-size: 18px;
            }
        }
    }
}
</style>